<template>
  <!-- 购买或者加入购物车的时候选择商品的种类 -->
  <u-popup
    mode="bottom"
    v-model="showPopup"
    :z-index="121"
    border-radius="24"
    safe-area-inset-bottom
  >
    <view class="popup-body">
      <!-- 支付方式 -->
      <view class="popup-title">{{$t('order.methods')}}</view>
      <!-- 列表 -->
      <view class="list-section">
        <view
          class="list-item"
          v-for="(item, index) in payWayList"
          :key="index"
          @click="selectItem(item)"
        >
          <view class="list-info">
            <!-- 1:微信，2:货到付款，3:余额，4:支付宝，7:朋友代付 -->
            <i
              v-if="item.payment == 1"
              style="color: #2cbb0b"
              class="iconfont icon-weixinzhifu"
            ></i>
            <i
              v-if="item.payment == 2"
              style="color: #33ca99"
              class="iconfont icon-yinhangka1"
            ></i>
            <i
              v-if="item.payment == 3"
              style="color: #fa9c0e"
              class="iconfont icon-consumption-fill"
            ></i>
            <i
              v-if="item.payment == 4"
              style="color: #5a9ef7"
              class="iconfont icon-zhifubao1"
            ></i>
            <i
              v-if="item.payment == 7"
              style="color: #f0250e"
              class="iconfont icon-trust-fill"
            ></i>
						<i
						  v-if="item.payment == 13"
						  class="iconfont icon-tonglian-zhifu"
						></i>
            <text>{{ item.name }}</text>
          </view>
          <view class="item-select">
            <i
              v-if="payWay == item.payment"
              class="iconfont"
              :class="payWay == item.payment ? 'icon-success-fill' : ''"
            ></i>
            <view v-else class="default"></view>
          </view>
        </view>
      </view>
      <!-- 关闭按钮 -->
      <view class="close-icon" @click="closePopup">
        <view class="icon-box">
          <i class="iconfont icon-close"></i>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="foot-btns">
        <view class="foot-content">
          <view class="confirm-btn" @click="handleConfirm">{{$t('list.confirm')}}</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "",
  props: {
    payWayList: {
      type: Array,
      default: [],
    },
    current: {
      type: [String,Number],
      default: "",
    },
    showPopup: {
      type: Boolean,
      default: false,
    },
  },
  mixins: [],
  components: {},
  data() {
    return {
      payWay: "",
      list: [],
    };
  },
  mounted() {
    this.payWay = this.current;
    this.list = this.payWayList;
		console.log('payWayList', this.payWayList);
		console.log('payWay', this.current);
  },
  watch: {},
  filters: {},
  computed: {},
  methods: {
    selectItem(item) {
      this.payWay = item.payment;
    },
    // 点击确认按钮
    handleConfirm() {
      this.$emit("payTypeSelect", {
        type: this.payWay,
      });
    },
    closePopup() {
      this.$emit("closePopup");
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-body {
  width: 100%;
  background-color: #ffffff;
  max-height: 80vh;
  position: relative;
  .popup-title {
    width: 100%;
    padding: 3.46vw 4.8vw 0 4.8vw;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #262626;
  }
  .list-section {
    width: 100%;
    padding-left: 4.8vw;
    .list-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f2f2f2;
      padding: 40rpx 4.8vw 40rpx 0;
      .list-info {
        display: flex;
        align-items: center;
        .iconfont {
          font-size: 54rpx;
        }
        text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
          margin-left: 20rpx;
        }
      }
      .item-select {
        width: 32rpx;
        height: 32rpx;
        position: relative;
        .default {
          width: 32rpx;
          height: 32rpx;
          background: #ffffff;
          border: 1px solid #919191;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: 0;
        }
        .iconfont {
          position: absolute;
          left: -8rpx;
          top: -14rpx;
          font-size: 48rpx;
          color: #f0250e;
        }
      }
    }
  }

  .close-icon {
    width: 12.78vw;
    height: 12.78vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
      color: #262626;
      font-weight: 600;
      font-size: 36rpx;
    }
  }

  .foot-btns {
    width: 100%;
    border-top: 1px solid #f0f1f3;
    .foot-content {
      width: 100%;
      height: 12.8vw;
      display: flex;
      justify-content: center;
      align-items: center;
      .confirm-btn {
        width: 90.4vw;
        height: 10.134vw;
        border-radius: 5.067vw;
        background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
      }
    }
  }
}
</style>
